<template>
  <div>
    <div class="setting">
      <div class="net" style="margin-right: 30px">
        <div class="title">网略设置</div>
        <div class="content">
          <span>端口: </span>
          <input type="text" v-model="wsServer.port" :disabled="wsServer.isOpen"/>
          <div class="btn" :class="{active:wsServer.isOpen}" @click="onOpenServer()">
            <span>{{ wsServer.isOpen ? '关闭服务' : '开启服务' }}</span>
          </div>
        </div>
      </div>
      <div class="net">
        <div class="title">服务状态</div>
        <div class="content">
          <span v-if="wsServer.isOpen">已开启</span>
          <span v-else>未开启</span>
        </div>
      </div>
    </div>

    <div class="message">
      <div class="message-item">
        <span>数据1: </span>
        <input type="text" v-model="wsServer.text1">
        <div class="btn" @click="sendMessage(wsServer.text1)">发送</div>
      </div>
      <div class="message-item">
        <span>数据2: </span>
        <input type="text" v-model="wsServer.text2">
        <div class="btn" @click="sendMessage(wsServer.text2)">发送</div>
      </div>
      <div class="message-item">
        <span>数据3: </span>
        <input type="text" v-model="wsServer.text3">
        <div class="btn" @click="sendMessage(wsServer.text3)">发送</div>
      </div>
    </div>

    <div class="clear-btn" @click="wsServer.serverRecord = []">清屏</div>

    <div class="record" ref="record">
      <div v-for="(item,index) in wsServer.serverRecord" :key="index">
        <div class="identity">
          [{{ item.identity }}]
        </div>
        <div class="time">
          : &nbsp;{{ item.time | formatDate }}
        </div>
        <div class="text">
          : &nbsp;{{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '../setting/timeUtil'

const { ipcRenderer } = window.require('electron')
export default {
  name: 'Server',
  data () {
    return {}
  },
  filters: {
    formatDate (time) {
      return formatDate(time, 'hh:mm:ss')
    }
  },
  computed: {
    ...mapState([
      'wsServer'
    ])
  },
  watch: {
    wsServer: {
      handler (n, o) {
        this.$nextTick(() => {
          this.scrollBottom()
        })
      },
      deep: true
    }
  },
  mounted () {
    this.scrollBottom()
  },
  methods: {
    scrollBottom () {
      this.$refs.record.scrollTop = this.$refs.record.scrollHeight
    },
    onOpenServer () {
      if (!this.wsServer.port) {
        return
      }
      if (this.wsServer.isOpen) {
        ipcRenderer.send('closeWebsocketServer')
      } else {
        ipcRenderer.send('createWebsocketServer', this.wsServer.port)
      }
      this.wsServer.isOpen = !this.wsServer.isOpen
    },
    sendMessage (text) {
      if (!this.wsServer.isOpen || !text || text.trim().length < 1) {
        return
      }
      ipcRenderer.send('sendAll', text)
      this.wsServer.serverRecord.push({
        identity: '服务器 - 广播',
        text: text,
        time: new Date()
      })
      this.$nextTick(() => {
        this.scrollBottom()
      })
    }
  }
}
</script>

<style scoped lang="less">
.net {
  width: calc(50% - 4px - 15px);
  height: 100px;
  border: 1px #6e6e6e solid;
  margin-top: 20px;
  border-radius: 3px;
  font-size: 15px;
  display: inline-block;

  .title {
    line-height: 20px;
    text-align: center;
    position: relative;
    top: -10px;
    left: 10px;
    width: 80px;
    height: 20px;
    background-color: #eaeaea;
  }

  .content {
    margin-left: 10px;
    line-height: 25px;

    input {
      width: 50px;
      height: 15px;
    }

    .btn {
      width: 70px;
      height: 25px;
      margin-left: 12px;
      font-size: 13px;
      text-align: center;
      display: inline-block;
      line-height: 25px;
      border: 1px #b6b6b6 solid;
      border-radius: 3px;
      vertical-align: middle;

      &:active {
        transform: translatey(1px);
        box-shadow: 2px 2px 2px #727171;
      }
    }
  }
}

.message {
  margin-top: 20px;
  width: calc(100% - 5px);
  height: 100px;
  line-height: 25px;

  .message-item {
    margin-top: 10px;
    vertical-align: middle;
  }

  input {
    width: calc(100% - 130px);
    height: 18px;
    font-size: 12px;
    line-height: 15px;
    vertical-align: middle;
  }

  .btn {
    width: 60px;
    height: 25px;
    margin-left: 12px;
    font-size: 13px;
    text-align: center;
    display: inline-block;
    line-height: 25px;
    border: 1px #b6b6b6 solid;
    border-radius: 3px;
    vertical-align: middle;
    position: absolute;
    right: 14px;

    &:active {
      transform: translatey(1px);
      box-shadow: 2px 2px 2px #727171;
    }
  }
}

.clear-btn {
  width: 60px;
  height: 25px;
  font-size: 13px;
  text-align: center;
  display: inline-block;
  line-height: 25px;
  border: 1px #b6b6b6 solid;
  border-radius: 3px;
  vertical-align: middle;
  float: right;
  margin: 7px 5px;

  &:active {
    transform: translatey(1px);
    box-shadow: 2px 2px 2px #727171;
  }
}

.record {
  width: calc(100% - 5px);
  height: calc(100vh - 325px - 25px);
  border: 1px #6e6e6e solid;
  border-radius: 3px;
  margin-top: 20px;
  background-color: #ffffff;
  overflow: scroll;

  .identity {
    display: inline-block;
    color: orange;
    margin-top: 4px;
    font-size: 12px;
    line-height: 14px;
  }

  .time {
    display: inline-block;
    color: cornflowerblue;
    margin-top: 4px;
    font-size: 12px;
    line-height: 14px;
  }

  .text {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
  }
}

.active {
  border: 1px #6e6e6e solid !important;
  color: #3070e3;
}
</style>
